import { Component, FC, useEffect, useState } from "react";
import Taro, { request } from "@tarojs/taro";
import { connect } from "react-redux";
import { test_action } from "../../actions/counter";
import { View, Button, Text, Map } from "@tarojs/components";
import { AtButton, AtIcon } from "taro-ui";

import { fetchLogin } from "../../api/index";
// #region 书写注意
// 目前 typescript 版本还无法在装饰器模式下将 Props 注入到 Taro.Component 中的 props 属性
// 需要显示声明 connect 的参数类型并通过 interface 的方式指定 Taro.Component 子类的 props
// 这样才能完成类型检查和 IDE 的自动提示
// 使用函数模式则无此限制
// ref: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20796
// #endregion

class Welcome extends Component<any, any> {
  componentWillReceiveProps(nextProps) {
    // console.log(this.props, nextProps);
  }

  state = {
    msg: "0", // test
  };

  onLoad() {
    // this.handleGetData();
  }

  handleGetData = async () => {
    // Taro.request({
    //   url: "",
    //   method: "GET",
    //   data: "",
    // });
    const data = await fetchLogin();
    console.log("datd:, d", data);
    // Taro.request({
    //   url: "http://localhost:3000/api/wx/test",
    //   method: "GET",
    //   data: { a: 1, size: 5 },
    //   success: (res) => {
    //     console.log("res", res);
    //     // setCount(res.data.msg);
    //     this.setState({ msg: res.data.msg }, () => {
    //       console.log("this.-------:", this.state);
    //     });
    //   },
    //   fail: (error) => {
    //     console.log("error:", error);
    //   },
    // });
  };

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
    // console.log("小程序分享");
    return {
      title: "微信小程序分析",
    };
  }

  render() {
    const dispatch = this.props.dispatch;
    return (
      <View className="index">
        <AtButton
          onClick={() => {
            this.handleGetData();
          }}
        >
          taro ui 测试按钮
        </AtButton>
        <Button
          onClick={() => {
            this.setState({ msg: "我是taro-test-app" }, () => {
              dispatch(test_action(this.state.msg));
            });

            Taro.navigateTo({ url: "/pages/index/index" });
          }}
        >
          {this.state.msg}
        </Button>
        <View className="at-icon at-icon-settings"></View>
        <Button openType="contact">客服功能</Button>
        <Map longitude={110} latitude={37.5}></Map>
        <View>
          <Text>Hello, World</Text>
        </View>
      </View>
    );
  }
}

export default connect(
  (state) => {
    return { ...state };
  },
  (dispatch) => {
    return { dispatch };
  }
)(Welcome);
